<template>
	<view class="content">
		<!-- F1: 轮播广告 —— uni-app内置组件：swiper -->
		<!-- indicator-dots：指示器小圆点是否显示 -->
		<!-- autoplay：是否自动轮播 -->
		<!-- interval：间隔，两个广告间的停留时间 -->
		<!-- duration：持续时间，指一个广告切换动画时长 -->
		<!-- indicator-color：指示器的颜色 -->
		<!-- indicator-active-color：指示器激活状态的颜色 -->
		<swiper indicator-active-color="#090" indicator-color="#f2f2f2" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
			<swiper-item v-for="(c, i) in carousels" :key="i">
				<view class="swiper-item">
					<image :src="base+c.pic" mode="widthFix" @click="jump(c.href)"/>
				</view>
			</swiper-item>
		</swiper>
		<!-- <text>BASE: {{base}}</text> -->
		<!-- <text>{{carousels}}</text> -->
		
		<!-- F2: 八宫格功能菜单 	-->
		<!-- column：一行中列的数量 -->
		<!-- square：每个宫格是否显示为方形 -->
		<!-- showBorder：每个宫格是否显示边框 -->
		<uni-grid class="menu-grid" :column="4" :square="false" :showBorder="false">
			<uni-grid-item v-for="(m,i) in menuItems" :key="i">
				<view class="menu-item" @click="jump(m.href)">
					<image :src="base+m.pic" mode="widthFix"/>
					<text>{{m.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- <text>{{menuItems}}</text> -->
		
		<!-- F3: 商业服务 -->
		<zh-card title="| 商业服务">
			<view class="service-body">
				<!-- 左侧：房屋租售 -->
				<view class="service-item  fwzs">
					<!-- 文字部分：两行 -->
					<view class="txt">
						<text>房屋租售</text>
						<view>
							<navigator url="">租房</navigator>
							<navigator url="">短租</navigator>
						</view>
					</view>
					<!-- 图片部分：一张   不保持原始宽高比，使用指定的尺寸对图片进行缩放 -->
					<image class="pic" src="../../static/img/chuzu.png" mode="scaleToFill"/>
				</view>
				<!-- 右侧：便民服务 -->
				<view class="service-item  bmfw">
					<!-- 文字部分：两行 -->
					<view class="txt">
						<text>便民服务</text>
						<view>
							<navigator url="">便利店</navigator>
							<navigator url="">超市</navigator>
						</view>
					</view>
					<!-- 图片部分：一张   不保持原始宽高比，使用指定的尺寸对图片进行缩放 -->
					<image class="pic" src="../../static/img/bianmin.png" mode="scaleToFill"/>
				</view>
			</view>
		</zh-card>		
		
		<!-- F4: 社区活动 -->
		<zh-card title="| 社区活动">
			<view class="activity-body">
				<view class="activity-item" v-for="(a,i) in activities" :key="i">
					<!-- 左侧：活动介绍文字 -->
					<view class="txt">
						<text class="title">{{a.title}}</text>
						<text class="content">{{a.content}}</text>
						<text class="start-time">{{a.startTime | datetime}}</text>
					</view>
					<!-- 右侧：活动相关图片 -->
					<image class="pic" :src="base+a.pic" mode="scaleToFill"/>
				</view>				
			</view>
		</zh-card>
		<!-- <text>{{activities}}</text> -->
	</view>
</template>

<script>
	import { indexData, base } from '@/service'
	export default {
		data() {
			return {
				base,				//把服务器基地址上升为模型变量
				carousels: [],		//轮播广告数据
				menuItems: [],		//应用菜单里的条目数据
				activities: [],		//社区活动数据
			}
		},
		//生命周期方法——页面挂载完成，功能类似于组件里的mounted方法
		async onLoad() {
			//弹出吐司对话框，欢迎回来
			uni.showToast({
				title: '欢迎回来',
				duration: 3000, //显示持续时长
				icon: 'none', //取消图标
			})
			//异步请求当前页面必需的动态数据
			let data = await indexData()
			console.log(data);
			this.carousels = data.carousels
			this.menuItems = data.menuItems
			this.activities = data.activities
		},
		methods: {
			//导航跳转到指定的页面
			jump(url){
				uni.navigateTo({ url })
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper-item {
		image {
			width: 100%;
		}
	}
	.menu-grid {
		background-color: $uni-bg-color;
		margin-top: $uni-spacing-col-lg;
		.menu-item {
			flex-direction: column; //弹性容器主轴方向：纵向	
			padding: $uni-spacing-col-lg 0;
			align-items: center;	//子元素在交叉轴上左右居中
			image {
				width: 30%;
			}
		}
	}

	.service-body {
		width: 100%;
		.service-item {
			//弹性容器中的子元素尺寸增长权重相等
			flex: 1;
			//弹性容器中的子元素在主轴方向上两端对齐
			justify-content: space-between;
			//弹性容器中的子元素在交叉轴上居中对齐
			align-items: center;
			&.fwzs {padding-right: $uni-spacing-row-lg/2;}
			&.bmfw {padding-left: $uni-spacing-row-lg/2;}
			.txt {
				height: 120rpx;
				flex: 1;
				//弹性容器主轴方向：纵向
				flex-direction: column;
				//弹性容器中的子元素在主轴方向上对齐方式：空白环绕
				justify-content: space-around;
				> view {
					//弹性容器中的子元素在主轴方向上对齐方式：空白在中央
					justify-content: space-between;
					navigator {
						font-size: $uni-font-size-sm; 
						color: $uni-text-color-grey;
					}
				}
			}
			.pic {
				width: 190rpx; 
				height:120rpx; 
				margin-left: $uni-spacing-row-sm;
			}
		}
	}
	
	.activity-body {
		//主轴方向：纵向
		flex-direction: column;
		width: 100%;
		
		.activity-item {
			width: 100%;
			margin: $uni-spacing-col-base 0;
			&:not(:last-child) {
				border-bottom: 1px solid $uni-border-color;
			}
			.txt {
				//弹性子元素尺寸增长权重：1
				flex: 1;
				width: 450rpx;  //控制父元素宽度，子元素才能显示省略号
				//主轴方向：纵向
				flex-direction: column;
				.title { font-weight: bold; @include ellipsis-1;}
				.content { @include ellipsis-1; }   //使用uni.scss定义的混入
				.start-time {
					font-size: $uni-font-size-sm;
					color:$uni-text-color-grey;
					margin-top: $uni-spacing-col-lg;
				}
			}
			.pic {
				width: 220rpx;
				height: 140rpx;
				margin-left: $uni-spacing-row-sm;
			}
		}
	}
</style>
